import React, { useEffect, useRef } from "react";
import churu from "./Churu.module.less";
import * as echarts from "echarts";

function DauDnu() {
  const chartRef = useRef(null); // 使用 useRef 来获取 DOM 元素

  useEffect(() => {
    if (chartRef.current) {
      const myChart = echarts.init(chartRef.current);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
      const option = {
        title: {
          text: "近一年的DAU/DNU",
          top: "20",
          left: "16",
          textStyle: {
            fontSize: "14",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#9edcdc",
            },
          },
        },
        legend: {
          icon: "circle",
          left: "65%",
          top: "15",
          data: ["DAU", "DNU"],
        },

        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "DAU",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [120, 132, 101, 134, 90, 230, 210, 100, 90, 50, 80, 100],
          },
          {
            name: "DNU",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [220, 182, 191, 234, 290, 330, 310, 200, 300, 100, 150, 200],
          },
        ],
      };
      myChart.setOption(option);
    }
  }, []); // 空数组表示这个 effect 只在组件挂载时运行一次

  return <div id="box" ref={chartRef} className={churu.box}></div>; // 直接使用 ID，并通过 ref 引用 DOM 元素
}

export default DauDnu;
